<template>
	<view class="index-cart-box">
		<!--  顶部导航栏  -->
		<view class="cu-custom top-nav" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed bg-white" :style="style">
				<view class="cu-left">
					购物车
				</view>
				<view class="cu-right" @tap="switchDelete">
					{{isDelete == 0 ? '取消' : '管理'}}
				</view>
			</view>
		</view>
		<!--  顶部导航栏  -->
		
		<view class="list-box" v-if="list.length>0">
			<view>
				<!-- 店铺列表 -->
				<view class="shop-info-box" v-for="(item,index) in list" :key="index">
					<view class="shop-name u-line-1">
						<u-checkbox @change="shopCheck(item,index)" v-model="item.checked" label-size="0" size="32rpx" icon-size="24rpx" active-color="#fa436a" shape="circle"></u-checkbox>
						<text @tap="navToShop(item.storeId)" class="name-text">{{item.storeName}}</text>
					</view>
					<!--  商品列表  -->
					<view class="goods-item" v-for="(goods,gInd) in item.productList" :key="gInd">
						<view class="goods-left">
							<u-checkbox  @change="goodsCheck(goods,gInd,index)"  v-model="goods.checked" label-size="0" size="32rpx" icon-size="24rpx" active-color="#fa436a" shape="circle"></u-checkbox>
						</view>
						<view class="goods-img" @tap="navToDetail(goods)">
							<image :src="goods.goodsImg" class="img"></image>
						</view>
						<view class="goods-right">
							<view class="goods-name u-line-2"  @tap="navToDetail(goods)">
								{{goods.goodsName}}
							</view>
							<view class="spec-box">
								<view class="spec-text u-line-1">{{goods.sku ? goods.sku : '暂无规格'}}</view>
							</view>
							<view class="price-box">
								<text class="price-text">￥{{goods.cartMoney}}</text>
								<view class="num-box">
									<view class="num-bnt" @tap="editCartNum(index,gInd,goods,-1)"><u-icon name="minus" color="#7a7a7a" size="24"></u-icon></view>
									<input type="text" :disabled="true"  class="num-text" :value="goods.goodsNum"/>
									<view class="num-bnt"  @tap="editCartNum(index,gInd,goods,1)"><u-icon name="plus" color="#7a7a7a" size="24"></u-icon></view>
								</view>
							</view>
						</view>
					</view>
					<!-- 商品列表end -->
					
				</view>
				<!-- 店铺列表end -->
				
				
				<view v-if="isMore == false" style="padding-top: 20px;"><u-divider>没有更多了</u-divider></view>
			</view>
		</view>
		
		
		<view class="no-goods-box" v-if="list.length == 0">
			<view>
				<u-icon name="shopping-cart" color="#fa436a" size="160rpx"></u-icon>
			</view>
			<text class="no-text">购物车空空如也,</text>
			<text @tap="goIndex()" class="no-text" style="color: #FA436A;">去逛逛吧 >></text>
		</view>
		
		
		<view class="bottom-btn-box">
			<view class="bottom-check">
				<u-checkbox  @change="changeCheckAll"  v-model="checkAll" label-size="0" size="32rpx" icon-size="24rpx" active-color="#fa436a" shape="circle"></u-checkbox>
				<text class="all-text">全选</text>
			</view>
			<view class="bottom-btn-r">
				<text class="total-text">合计:</text>
				<text class="total">￥{{totalPrice}}</text>
				<view class="submit-btn" @tap="cartSubmit">{{isDelete == 0 ? '删除':'结算'}}{{'(' + checkNum + ')'}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {hasLogin} from "../../utils/hasLogin.js"
	export default{
		name:"cart",
		data(){
			return {
				/*  是否是删除模式0是 1否  */
				isDelete:1,
				
				/*  是否是全选  */
				checkAll:false,
				
				/*  选中的购物车ID  */
				cartIds:[],
				
				/*  选中数量  */
				checkNum:0,
				
				/*  总价格  */
				totalPrice:0,
				
				list:[],
				
				/*  第几页  */
				pageNo:1,
				
				/*  是否还有更多  */
				isMore:false,
				
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
			}
		},
		computed: {
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		
		methods:{
			
			/*  去商品详情  */
			navToDetail(item){
				uni.navigateTo({
					url:"/pages/goods/detail?id=" + item.goodsId
				})
			},
			
			/*  去店铺详情  */
			navToShop(id){
				uni.navigateTo({
					url:"/pages/shop/index?id=" + id
				})
			},
			
			/*  结算或者删除购物车  */
			cartSubmit(){
				/*  是删除模式的时候  */
				if(this.isDelete == 0){
					let cartId = this.cartIds.join(",")
					this.$ajax("cartDel",{id:cartId}).then((res)=>{
						if(res.code>=0){
							uni.showToast({
								icon:"success",
								duration:1500,
								title:"删除成功"
							})
							this.totalPrice = 0
							this.checkAll = false
							this.checkNum = 0
							this.pageNo = 1
							this.getList(0)
						}
					}).catch((err)=>{
						
					})
				}else{
					
				}
			},
			
			/*  修改购物车数量 pInd 店铺所在的index ，ind 商品所在的index  goods商品数据     type -1 是减  1是加*/
			editCartNum(pInd,ind,goods,type){
				let list = JSON.parse(JSON.stringify(this.list))
				goods = JSON.parse(JSON.stringify(goods))
				if(type == -1 && goods.goodsNum<=1){
					return false
				}
				goods.goodsNum = goods.goodsNum + type
				let data = {
					"id":goods.id,
					"goodsNum":type,
				}
				this.$ajax("cartEditNum",data).then((res)=>{
					if(res.code>=0){
						list[pInd].productList[ind] = goods
						this.list = list
					}
				}).catch((err)=>{
					
				})
			},
			
			
			/*  进行全选操作  */
			changeCheckAll(e){
				this.checkAll = e.value
				let list = JSON.parse(JSON.stringify(this.list))
				for (let i = 0; i < list.length; i++) {
					list[i].checked = e.value
					let itemList = list[i].productList
					for(let j = 0; j<itemList.length; j++){
						itemList[j].checked = e.value
					}
					list[i].productList = itemList
				}
				this.list = list
				this.caclPriceAndNum()
				if(!e.value){
					this.totalPrice = 0
					this.checkNum = 0
				}
			},
			
			/*  商铺选择  */
			shopCheck(item,index){
				let newItem = JSON.parse(JSON.stringify(item))
				let isTrue = newItem.checked == true ? false : true
				if(newItem.productList == 1){
					newItem.productList[0].checked = isTrue
				}else{
					let list = newItem.productList
					for (let i = 0; i < list.length; i++) {
						list[i].checked = isTrue
					}
					newItem.productList = list
				}
				newItem.checked = isTrue
				let allList = JSON.parse(JSON.stringify(this.list))
				allList[index] = newItem
				this.list = allList
				this.caclPriceAndNum()
			},
			
			/*  商品选择  */
			goodsCheck(item,index,pIndex){
				let newItem = JSON.parse(JSON.stringify(item))
				let isTrue = newItem.checked == true ? false : true
				let pList = JSON.parse(JSON.stringify(this.list[pIndex]))
				newItem.checked = isTrue
				pList.productList[index] = newItem
				
				if(pList.productList.length == 1){
					pList.checked = isTrue
				}else{
					let isAllTrue = true
					let list = pList.productList
					for (let i = 0; i < list.length; i++) {
						if(!list[i].checked){
							isAllTrue = false
							break;
						}
					}
					pList.checked = isAllTrue
				}
				let allList = JSON.parse(JSON.stringify(this.list))
				allList[pIndex] = pList
				this.list = allList
				this.caclPriceAndNum()
			},
			
			
			/*  计算价格和数量*/
			caclPriceAndNum(){
				let list = JSON.parse(JSON.stringify(this.list))
				let price = 0
				let num = 0
				let isTrue = true
				this.cartIds = []
				for (let i = 0; i < list.length; i++) {
					let itemList = list[i].productList
					for(let j = 0; j<itemList.length; j++){
						if(itemList[j].checked){
							num ++
							price = price + Number.parseFloat(itemList[j].marketPrice)
							this.cartIds.push(itemList[j].id)
						}else{
							isTrue = false
						}
					}
				}
				this.checkNum = num
				this.totalPrice = price
				this.checkAll = isTrue
			},
			
			
			/*  切换删除模式  */
			switchDelete(){
				this.isDelete = this.isDelete == 0 ? 1 : 0
			},
			
			goIndex(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			
			/*  获取购物车列表  type 0 的时候代表刷新或者第一次请求 1 代表滚动到底部 */
			getList(type){
				let data = {pageSize:10,pageNo:this.pageNo}
				this.$ajax("cartList",data).then((res)=>{
					uni.stopPullDownRefresh()
					if(res.code>=0){
						if(type == 0){
							this.list = res.data
						}else{
							this.list = this.list.concat(res.data)
						}
						if(res.data.length<10){
							this.isMore = false
						}else{
							this.isMore = true
						}
					}
				}).catch((err)=>{
					uni.stopPullDownRefresh()
				})
			},
			
		},
		
		onLoad() {
			hasLogin()
		},
		onShow() {
			this.getList(0)
		},
		
		/*  下拉刷新  */
		onPullDownRefresh() {
			let t = setTimeout(() => {
				this.pageNo = 1
				this.isMore = true
				this.getList(0)
				clearTimeout(t)
			}, 1000)
		},
		
		/*  滚动到底部  */
		onReachBottom(){
			if(this.isMore){
				this.pageNo = this.pageNo + 1
				this.getList(1)
			}
		},
		
		
	}
</script>

<style scoped lang="scss">
	page, body, html{
		background: #FFFFFF;
	}
	.index-cart-box{
		max-width: 2400rpx;
		margin: 0 auto;
		padding-bottom: 100rpx;
		.top-nav{
			height: 40px;
		}
		.cu-left{
			flex-grow: 1;
			text-align: center;
			font-size: 32rpx;
			
		}
		.cu-right{
			flex-flow: 0;
			position: absolute;
			right: 20rpx;
		}
		.list-box{
			width: 100%;
			padding: 40rpx 20rpx;
		}
		
		.shop-info-box{
			width: 100%;
			box-shadow: 0 0 20rpx rgba(0,0,0,0.2);
			margin-bottom: 20rpx;
			padding: 0 20rpx;
			border-radius: 16rpx 16rpx;
			.shop-name{
				font-size: 26rpx;
				color: #333333;
				font-weight: bold;
				padding: 20rpx 0;
				.name-text {
					padding-left: 20rpx;
				}
				
			}
			.goods-item{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-bottom: 20rpx;
			}
			.goods-left{
				flex-grow: 0;
			}
			.goods-img{
				max-width: 200rpx;
				min-width: 200rpx;
				height: 160rpx;
				text-align: center;
				.img{
					width: 160rpx;
					height: 160rpx;
				}
			}
			.goods-right{
				flex-grow: 1;
				width: calc(100% - 240rpx);
			}
			.goods-name{
				font-size: 24rpx;
				color: #333333;
				height: 68rpx;
				line-height: 34rpx;
			}
			/deep/ .u-checkbox__label{
				margin: 0;
			}
			.spec-box{
				padding-top: 10rpx;
				.spec-text{
					background: #F7F7F7;
					color: #7a7a7a;
					font-size: 24rpx;
					line-height: 24rpx;
					padding: 10rpx 14rpx;
					border-radius: 8rpx 8rpx;
				}
			}
		}
		.price-box{
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-top: 10rpx;
			.price-text{
				color: #FA436A;
				font-size: 32rpx;
			}
			.num-box{
				.num-bnt{
					font-size: 24rpx;
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					background: #f1f1f1;
					font-weight: bold;
				}
				.num-text{
					display: inline-block;
					width: 60rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					background: #f1f1f1;
					vertical-align: bottom;
					margin: 0 12rpx;
					color: #FA436A;
					white-space:nowrap;
					font-size: 24rpx;
				}
				/* .num-text::-webkit-scrollbar {
				    display: none;
				} */
			}
		}
	
	
		.no-goods-box{
			text-align: center;
			margin-top: 40%;
			.no-text{
				color: #7a7a7a;
				font-size: 24rpx;
			}
		}
		.bottom-btn-box{
			position: fixed;
			bottom: 48px;
			width: 100%;
			max-width: 2400rpx;
			margin:  0 auto;
			background: #FFFFFF;
			z-index: 99999;
			height: 100rpx;
			border-top: 2rpx solid #F2F2F2;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.bottom-check{
				padding-left: 40rpx;
			}
			.all-text{
				color: #333333;
				font-size: 24rpx;
				margin-left: -10px;
			}
			.bottom-btn-r{
				padding-right: 20rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}
			.submit-btn{
				display: inline-block;
				padding: 10rpx 16rpx;
				font-size: 28rpx;
				line-height: 28rpx;
				font-weight: normal;
				background: #FA436A;
				color:#FFFFFF;
				border-radius: 28rpx 28rpx;
			}
			.total{
				padding-right: 50rpx;
				font-size: 32rpx;
			}
			.total-text{
				padding-right: 20rpx;
				font-size: 28rpx;
			}
		}
	}
	
</style>
